{% extends "base.html" %}

{% block content %}
		<div class="room_image">
		{% if room.get_image %}
		<img src="images/{{room.get_image}}"/>
		{% endif %}
		</div>
		
		{% if cutscene %}
		<div class="cutscene">
		<p>{{cutscene}}</p>
		</div>
		{% endif %}
		
		<div class="room_description">
		<p>{{room.get_description}}</p>
		</div>
		

<audio id="dangerzone" 
   preload="auto" 
   src="/images/dangerzone.mp3" >
</audio>
<button type="button" onclick="aud_play_pause()">Play/Pause</button>
<script>
function aud_play_pause() {
  var myAudio = document.getElementById("dangerzone");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}
</script>

<script>
  myAudio=document.getElementById('dangerzone');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 55;
    this.play();
  });
	</script>


{% endblock content %}
